<style>{$styleSheet}</style>

<!-- menu include -->
{include file="menu.tpl"}

{if $findFriends}

{if !$friends}
&nbsp;&nbsp; Sorry! <span style="font-size: 16px; font-weight: bold;">0</span> WiiSocial users are playing <span style="font-size: 16px; font-weight: bold;">{$game}</span> online!
{else}

<!-- the following is the html for the 'find friends' page, which lists other users
     with same game, and friend code set
-->
<br/>
&nbsp;&nbsp;<span style="font-size: 16px; font-weight: bold;">{$numberOfUsers}</span> WiiSocial users are playing <span style="font-size: 16px; font-weight: bold;">{$game}</span> online!
<br/><br/>
<div id="pagination">
Page: 
{foreach from=$pagination item=page}
	{if $page == $activePage}
		<span class="active-page">{$page}</span>|
	{else}
		<a href="{$HOST}/friends.php?do=find-friends&page={$page}&game-id={$gameId}">{$page}</a>|
	{/if}
{/foreach}
<br/>
</div>
<div id="user">
<ul>
  {foreach from=$friends item=friend}
<li>
<table>
  <tr>
    <td class="image"><img src="{if $friend->getProfilePicSmallUrl()}{$friend->getProfilePicSmallUrl()}{else}http://wiisocial.mattmakins.co.uk/html/images/no-image.png{/if}" /></a></td>
	<td colspan="2">
		{if $friend->getIsFacebookFriend()}
			<img src="http://static.ak.facebook.com/images/icons/group.gif?59:25796" title="{$friend->getFirstName()} is also your Facebook friend" />
		{/if}
		<span style="font-size:14px;"><b>{$friend->getFirstName()} {$friend->getLastName()}</b></span><br/><br/>
		<span style="color: grey">Friend Code:</span>&nbsp;
		{foreach from=$friend->getFriendCodeGameMapString() item=friendCodeGameMap}
          <b>{$friendCodeGameMap.friendCode}</b><br/>
        {/foreach}
     <br/>
	</td>
  </tr>
</table>
</li>
  {/foreach}
  </ul>
  </div>
{/if}
{/if}

<!-- the following is the html for the 'My Friends' page, which lists all users
     with same games, and possible friend code set
-->
{if $myFriends}

{if $friends == null}
&nbsp;&nbsp; Sorry! <span style="font-size: 16px; font-weight: bold;">0</span> WiiSocial friends.  Add some games to your collection.
{else}

<br/>
<div id="info">
<img src="http://wiisocial.mattmakins.co.uk/html/images/information.png"/>
These are friends that have the same game as you, you can use their friend code
for online play.</div>
<div style="margin-left: 2px; margin-right: 4px; margin-top: 10px; border: 1px solid grey; padding: 10px; font-family: sans-serif;">You have 
 <span style="font-size: 16px; font-weight: bold; color: #2c8bf9;">{$numberOfUsers}
 </span> WiiSocial friends over <span style="font-size: 16px; font-weight: bold; color: #2c8bf9;">
 {$totalPages}</span> pages.</div>
<div id="pagination">
Page: 
{foreach from=$pagination item=page}
	{if $page == $activePage}
		<span class="active-page">{$page}</span>|
	{else}
		<a href="{$HOST}/friends.php?do=display-friends&page={$page}">{$page}</a>|
	{/if}
{/foreach}
</div>

<div id="user">
<ul>
  {foreach from=$friends item=friend}
<li>
<table>
  <tr>
    <td class="image" valign="top"><img src="{if $friend->getProfilePicSmallUrl()}{$friend->getProfilePicSmallUrl()}{else}http://wiisocial.mattmakins.co.uk/html/images/no-image.png{/if}" /></a></td>
	<td style="padding-left: 10px;">
		<h1>{$friend->getFirstName()} {$friend->getLastName()}
		{if $friend->getIsFacebookFriend()}
			<img src="http://static.ak.facebook.com/images/icons/group.gif?59:25796" title="{$friend->getFirstName()} is also your Facebook friend" />
		{/if}</h1><br/>
		<span style="color: grey">Games: </span><br/>
		{foreach from=$friend->getFriendCodeGameMapString() item=friendCodeGameMap}
          {$friendCodeGameMap.game}: <b>{$friendCodeGameMap.friendCode}</b><br/>
        {/foreach}
	</td>
	<td>
	  <ul>
<!--	    <li><img src="http://wiisocial.mattmakins.co.uk/html/images/pencil_add.png" />-->
	  </ul>
	</td>
  </tr>
</table>
</li>
  {/foreach}
  </ul>
  </div>
<div id="pagination">
Page: 
{foreach from=$pagination item=page}
	{if $page == $activePage}
		<span class="active-page">{$page}</span>|
	{else}
		<a href="{$HOST}/friends.php?do=display-friends&page={$page}">{$page}</a>|
	{/if}
{/foreach}
<br/>
</div>
{/if}

{/if}